import React, { Component, ReactNode, Suspense } from "react";

import AppLayout from "./AppLayout"

import { get } from '../utils/storage'

import {
    BrowserRouter as Router,
    Redirect,
    Switch,
    Route,
    Link
} from "react-router-dom";

import router, { unAuthRouter, IRouter } from "../router";


class View extends Component {

    generateRouter = (routerList?: IRouter[]): ReactNode => {
        return (
            <>
                {
                    routerList?.map(r => {
                        if (r.children) {
                            return (
                                <>
                                    {this.generateRouter(r.children)}
                                </>
                            )
                        }
                        return (
                            <Route exact={r.exact} path={r.path} key={r.key} >{r.component}</Route>
                        )
                    })
                }
            </>
        )
    }

    render() {
        console.log('====================================');
        console.log(get('key'));
        console.log('====================================');
        // if (true) {
        //     return <Router><Redirect to={'/login'} /></Router>
        // }

        return (
            <>
                <Suspense fallback={<></>} >
                    <Router>
                        {!get('key') ? <Redirect to="/login" /> : <Redirect to="/" />}
                        <Switch>
                            {/* Route先匹配路径'/' 重定向到仪表盘页  然后匹配'/admin' 到里面内容页 ，如果都没匹配到那就到其他页面 */}
                            <Route path={'/'} exact>
                                <Redirect to={'/admin/index'} />
                            </Route>
  
                            <Route path='/admin' >
                                <AppLayout>
                                    <Suspense fallback={<></>} >
                                        {
                                            this.generateRouter(router)
                                        }
                                    </Suspense>
                                </AppLayout>
                            </Route>
                            <Switch>
                                {
                                    unAuthRouter.map(r => (
                                        <Route exact={r.exact} path={r.path} key={r.key} >{r.component}</Route>
                                    ))
                                }
                            </Switch>
                        </Switch>
                    </Router>
                </Suspense>
            </>
        );
    }
}

export default View;